import React from "react";
import Navbar from '@/component/Navbar/navbar'
import './ingred'
import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemIcon from '@material-ui/core/ListItemIcon';
import ListItemText from '@material-ui/core/ListItemText';
import StarIcon from '@material-ui/icons/Star';
import { types } from "@/api";

const useStyles = makeStyles((theme: Theme) =>
    createStyles({
        root: {
            width: '100%',
            maxWidth: 360,
            backgroundColor: theme.palette.background.paper,
        },
        right: {
            float: "right",
            fontSize: "14px",
            color: "#999"
        }
    }),
);


export default function Ingred(props: types.IObjectKeys) {
    const classes = useStyles();
    const { ingredients } = props;

    const getListItem = () => {
        return ingredients.map(({ name, dosage, important }: types.Ingredient) => {
            return <ListItem button key={name}>
                <ListItemIcon>
                    {important ? <StarIcon color='secondary'/> : null}
                </ListItemIcon>
                <ListItemText primary={name} />
                <span className={classes.right} >{dosage}</span>
            </ListItem>
        })
    }

    return (
        <List component="nav" className={classes.root} aria-label="contacts">
            {getListItem()}
        </List>
    )
}